{extend name="$BASE_POPUP" /}
{block name="body"}
<link rel="stylesheet" type="text/css" href="__STATIC__/easyui/themes/custom/easyui.css" />     
<style>
    .act{
        padding:160px 10px;
        position: absolute;
        left: 244px;
    }
    .act-btn{
        margin:25px 0;
    }
</style>
<!--<div id="js_sidebar" class="sidebar">    
    <div class="spinner" id="js_side_spinner" style="display: none;">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
    <div id="js_side_content"></div>
</div>-->
<div class="right-main right-off ui-form">
    <input type="hidden" id="class_id" name="class_id"/>
    <div id="js_main_header" class="main_header">
        <span class="frm_input_box search append">
            <a href="javascript:void(0);" id="js_search" class="frm_input_append">
                <i class="icon wb-search" title="搜索"></i>       
            </a>
            <input type="text" id="js_keyword" placeholder="请输入文章标题" value="" class="frm_input" />
        </span>
    </div>
    {if condition = "$singleSelect neq 0"}
    <div id="left">
        <div id="grid-table" class="easyui-datagrid"></div>
    </div>
    {else /}
    <div id="left" style="width:225px;float:left">
        <div id="grid-table" class="easyui-datagrid"></div>
    </div>
    <div class="act">
        <div class="act-btn">
            <button type="button" id="js_addBtn" class="btn-xs btn-default">        
                <i class="icon wb-plus"></i>添加
            </button>
        </div>
        <div class="act-btn">
            <button type="button" id="js_delBtn" class="btn-xs btn-default">        
                <i class="icon wb-close"></i>移除
            </button>
        </div>
    </div>
    <div id="right" style="float:right;width:225px;display:inline-block">
        <div id="choose-table" class="easyui-datagrid"></div>
    </div>
    {/if}
    
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__STATIC__/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="__STATIC__/easyui/locale/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript">
    
    function chooseRow(source,target){
        var rows = $(source).datagrid("getChecked");
        for(var i = 0; i < rows.length;i++){
            var index = $(source).datagrid("getRowIndex",rows[i]);
            $(source).datagrid("deleteRow",index);
            $(target).datagrid("insertRow",{index:i,row:rows[i]});
        }
        form.ui().render(); 
    }
    $("#js_addBtn").click(function(){
        chooseRow('#grid-table','#choose-table');
    })
    $("#js_delBtn").click(function(){
        chooseRow('#choose-table','#grid-table');  
    })
    
    var filter_ids = "{$filter_ids}";
    var single = "{$singleSelect}";
    var singleSelect = false;
    $(function () {
//        loadClassData();
        if (single == "1")
            singleSelect = true;
        else{
            var choose = $('#choose-table').datagrid({
                height: getGridHeight(),
                remoteSort: false,
                multiSort: true,
                SelectOnCheck: false,
                CheckOnSelect: false,
                columns: [[
                    {field: 'id', width: 80, align: 'center', checkbox: true},
                    {field: 'title', title: '文章名称', align: 'center', width: '140'},
                    // {field: 'author_name', title: '作者', align: 'center', width: '140'},
                    // {field: 'price', title: '单价', align: 'center', width: '80'},
                    // {field: 'score', title: '积分', align: 'center', width: '80'},
                ]],
                onSelect: function (index, data) {
                    var tr = $("#right .datagrid-btable tr");
                    tr.eq(index).find(".checkbox-item-label .checkbox-item").addClass("checked");
                    var len = tr.find("input[type='checkbox']:checked").length;
                    if ($('#grid-table').datagrid("getData").total == len)
                        $("#right .datagrid-header-check").find(".checkbox-item").addClass("checked");
                },
                onUnselect: function (index, data) {
                    $("#right .datagrid-btable tr").eq(index).find(".checkbox-item-label .checkbox-item").removeClass("checked");
                    $("#right .datagrid-header-check").find(".checkbox-item").removeClass("checked");
                },
                onSelectAll: function (rows) {
                    $("#right .datagrid-header-check").find(".checkbox-item").addClass("checked");
                    for (var i = 0; i < rows.length; i++) {
                        var tr = $("#right .datagrid-btable tr").eq(i);
    //                    console.log(tr.find(".checkbox-item-label .checkbox-item"))
                        tr.find(".checkbox-item-label .checkbox-item").addClass("checked");
                    }
                    form.ui().reRenderUI();
                },
                onUnselectAll: function (rows) {
                    $("#right .datagrid-header-check").find(".checkbox-item").removeClass("checked");
                    for (var i = 0; i < rows.length; i++) {
                        $("#right .datagrid-btable tr").eq(i).find(".checkbox-item-label .checkbox-item").removeClass("checked");
                    }
                    form.ui().reRenderUI();
                },
            })
        }
        var source = $('#grid-table').datagrid({
            url: getURL('loadNews', 'filter_ids=' + filter_ids),
            method: "GET",
            height: getGridHeight(),
            singleSelect: singleSelect,
            SelectOnCheck: false,
            CheckOnSelect: false,
            pagination: false,
            emptyMsg: '<span>无相关数据</span>',
            frozenColumns: [[
                    {field: 'id', width: 80, align: 'center', checkbox: true},
                    {field: 'title', title: '文章名称', align: 'center', width: '150'},
                    // {field: 'author_name', title: '作者', align: 'center', width: '140'},
// 
                // {field: 'price', title: '单价', align: 'center', width: '80'},
                    // {field: 'score', title: '积分', align: 'center', width: '80'},
                ]],

            onLoadSuccess: function () {
                form.ui().render();
                if ( !singleSelect) {
                    $("#left .datagrid-header-check").click(function () {
                        //全选checkbox 被单击
                        var checked = $(this).find("input[type='checkbox']")[0].checked;
                        if (checked)
                            $('#grid-table').datagrid('selectAll');//全选
                        else
                            $('#grid-table').datagrid('unselectAll');//全取消                        
                    });
                    $("#right .datagrid-header-check").click(function () {
                        //全选checkbox 被单击
                        var checked = $(this).find("input[type='checkbox']")[0].checked;
                        if (checked)
                            $('#choose-table').datagrid('selectAll');//全选
                        else
                            $('#choose-table').datagrid('unselectAll');//全取消                        
                    });
                }
            },
            onSelect: function (index, data) {
                var tr = $("#left .datagrid-btable tr");
                tr.eq(index).find(".checkbox-item-label .checkbox-item").addClass("checked");
                var len = tr.find("input[type='checkbox']:checked").length;
                if ($('#grid-table').datagrid("getData").total == len)
                    $("#left .datagrid-header-check").find(".checkbox-item").addClass("checked");
            },
            onUnselect: function (index, data) {
                $("#left .datagrid-btable tr").eq(index).find(".checkbox-item-label .checkbox-item").removeClass("checked");
                $("#left .datagrid-header-check").find(".checkbox-item").removeClass("checked");
            },
            onSelectAll: function (rows) {
                var ele = $("#left .datagrid-header-check").find(".checkbox-item").addClass("checked");
                for (var i = 0; i < rows.length; i++) {
                    var tr = $("#left .datagrid-btable tr").eq(i);
                    tr.find(".checkbox-item-label .checkbox-item").addClass("checked");
                }
                form.ui().reRenderUI();
            },
            onUnselectAll: function (rows) {
                $("#left .datagrid-header-check").find(".checkbox-item").removeClass("checked");
                for (var i = 0; i < rows.length; i++) {
                    $("#left .datagrid-btable tr").eq(i).find(".checkbox-item-label .checkbox-item").removeClass("checked");
                }
                form.ui().reRenderUI();
            }
        });
        
    });

//    function loadClassData() {
//        $("#class_id").val("");
//        $("#js_side_content").html('');
//        $("#js_side_spinner").show();
//        $.getJSON(getURL('goodsClass/getLevelClassData'), {level:3}, function (res) {
//             $("#js_side_spinner").hide();
//             var html = '<div class="no_data">暂无类别</div>';
//             if (res.success) {
//                 var data = res.data;
//                 if (data && data.length > 0) {
//                     html = '<div class="nav_title js_nav_title">商品分类</div>';
//                     html += '<div class="subNavBox js_sidebar_nav">';
//                     html += '<div class="sBox">';
//                     html += '<ul class="navContent">';
//                     html += '<li class="active"><a href="javascript:;">所有分类</a></li>';
//                     for (var i = 0; i < data.length; i++) {
//                         html += '<li data-id="' + data[i].id + '"><a href="javascript:;">' + data[i].class_name + '</a></li>';
//                     }
//                     html += '</ul></div>';
//                     html += '</div>';
//                 }
//             } else {
//                 html = '<div class="no_data">' + res.message + '</div>';
//             }
//             $("#js_side_content").html(html);
//             setSideNavHeight();
//         });
//    }
//    function clickSideNav(id) {
//        $("#class_id").val(id);
//        reload();
//    }

    $("#js_search").click(function () {
        reload();
    });
    function reload() {
        var keyword = $("#js_keyword").val();
        var class_id = $("#class_id").val();
        var choose_goods_codes = '';
        if(!singleSelect){
            choose_goods_codes = getGoodsCodes();
        }
        $('#grid-table').datagrid('load', {
            class_id: class_id,
            keyword: keyword,
            choose_goods_codes : choose_goods_codes,
            filter_ids: filter_ids
        });
    }
    function getGoodsCodes() {
        var data = $("#choose-table").datagrid("getData");
        var goods_codes = "";
        for (var i = 0; i < data.total; i++) {
            if (data.rows[i].title == null || data.rows[i].title == "")
                continue;
            if (goods_codes != "")
                goods_codes += ",";
            goods_codes += "'" + data.rows[i].goods_code + "'";
        }
        return goods_codes;
    }
    
    var _isClickSave = false;
    function saveData(callback, layer_index, autoClose) {
        if (_isClickSave)
            return;
        if(!singleSelect)
            var rows = $('#choose-table').datagrid('getRows');
        else
            var rows = $('#grid-table').datagrid("getChecked");
        if (rows.length == 0) {
            alert('请选择文章！');
        } else {
            _isClickSave = true;
            if (singleSelect)
                callback(rows[0]);
            else
                callback(rows);
            _isClickSave = false;
            if (autoClose) {
                this.close(layer_index);
            } else {
                for (var i = 0; i < rows.length; i++) {
                    if (filter_ids != '')
                        filter_ids += ',';
                    filter_ids += rows[i].id;
                    var rowIndex = $('#grid-table').datagrid('getRowIndex', rows[i]);
                    $('#grid-table').datagrid('deleteRow', rowIndex);
                }
                $('#grid-table').datagrid('uncheckAll');
            }
        }
    }
</script>
{/block}